﻿<div class="span9">
    <ul class="breadcrumb">
        <li><a href="http://localhost:7315/#/">Home</a> <span class="divider">/</span></li>
        <li><a href="#/product_list.html">Products</a> <span class="divider">/</span></li>
        <li class="active">Product Details</li>
    </ul>
    <!--<a href="#/admin_product_details/{{GadgetVM.Gadget.Id}}" class="btn btn-danger col-lg-offset-6">Admin View</a>-->
    <div class="row">
        <div id="gallery" class="span3">
            <a href="{{GadgetVM.Gadget.TopPict}}" title="{{GadgetVM.Gadget.Name}}">
                <img src="{{GadgetVM.Gadget.TopPict}}" style="width:100%" alt="{{GadgetVM.Gadget.Name}}" />
            </a>
            <br />
            <div id="differentview" class="moreOptopm carousel slide">
                <div class="carousel-inner">
                    <div class="item active" ng-repeat="pict in GadgetVM.Pictures">
                        <a href="{{pict.PictUrl}}"> <img style="width:29%" src="{{pict.PictUrl}}" alt="" /></a>
                       
                    </div>
                    <div class="item">
                        <a href="App/images/products/large/f3.jpg"> <img style="width:29%" src="App/images/products/large/f3.jpg" alt="" /></a>
                        <a href="App/images/products/large/f1.jpg"> <img style="width:29%" src="App/images/products/large/f1.jpg" alt="" /></a>
                        <a href="App/images/products/large/f2.jpg"> <img style="width:29%" src="App/images/products/large/f2.jpg" alt="" /></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="span6">
            <h3>{{GadgetVM.Gadget.Name}}</h3>
            <hr class="soft" />
            <form class="form-horizontal qtyFrm">
                <div class="control-group">
                    <label class="control-label"><span>{{GadgetVM.Gadget.Price}}</span></label>
                    <div class="controls">
                        <!--<input type="number" class="span1" placeholder="Qty." min="0"/>-->
                        <button type="submit" class="btn btn-large btn-primary pull-right" ng-click="addItem(GadgetVM.Gadget.Id)"> Add to cart <i class=" icon-shopping-cart"></i></button>
                    </div>
                </div>
            </form>
            <hr class="soft" />
            <h4>{{GadgetVM.Gadget.Qty}} item(s) in stock</h4>
            <h5>Category: {{GadgetVM.Gadget.ProductType}}</h5>
            <p>
                {{GadgetVM.Gadget.Descript}}
            </p>
            <hr>
            </div>
        </div>
    </div>
